<template>
  <div class="container">
    <div class="search-container">
      <div class="search-option-row"> 
        <label class="search-option-label">关键词</label>
        <div class="search-option-col1-for-row">
        <el-input v-model="listQuery.keyword_group" class="select-item" placeholder="最多输入3个关键词，以空格隔开" style="width: 580px;" ></el-input>
        <el-checkbox v-model="isAllKeyword" label="包含任意关键词" border></el-checkbox>
        <el-button v-if="isExpandSelect==false" icon="el-icon-arrow-down" @click="expandSelect(true)" >展开搜索条件</el-button>
        <el-button v-else icon="el-icon-arrow-up" @click="expandSelect(false)" >收起搜索条件</el-button>
        </div>
      </div>
      <div class="search-option-row" v-show="isExpandSelect"> 
        <label class="search-option-label">职位</label>
        <div class="search-option-col1-for-row">
        <el-input v-model="listQuery.position_group" class="select-item" placeholder="最多输入3个职位，以空格隔开" style="width: 560px;" ></el-input>
        </div>
      </div>
      <div class="search-option-row" v-show="isExpandSelect"> 
        <label class="search-option-label">所在公司</label>
        <div class="search-option-col1-for-row">
        <el-input v-model="listQuery.company_name" class="select-item" placeholder="请输入公司名称" style="width: 400px;" ></el-input>
        <el-radio v-model="listQuery.experience_type" label="0">目前公司</el-radio>
        <el-radio v-model="listQuery.experience_type" label="1">全部经历</el-radio>
        </div>
      </div>
      <div class="search-option-row" v-show="isExpandSelect"> 
        <label class="search-option-label">行业</label>
        <div class="search-option-col">
        <treeselect
          class="select-item" 
          :load-options="loadChildrenOptions"
          :multiple="true"
          :valueConsistsOf="valueConsistsOf"
          :options="industry_options"
          placeholder="请选择"
          v-model="listQuery.industry"
          style="width:200px"
        /> 
        </div>
        <label class="search-option-label">职能</label>
        <div class="search-option-col">
        <treeselect
          class="select-item" 
          :load-options="loadChildrenOptions"
          :multiple="true"
          :valueConsistsOf="valueConsistsOf"
          :options="job_options"
          placeholder="请选择"
          v-model="listQuery.job"
          style="width:200px"
        />  
        </div>
        <label class="search-option-label">城市</label>
        <div class="search-option-col">
        <treeselect
          class="select-item"
          :load-options="loadChildrenOptions"
          :multiple="true"
          :valueConsistsOf="valueConsistsOf"
          :options="city_options"
          placeholder="请选择"
          v-model="listQuery.city"
          style="width:160px"
          />
        </div>
        <label class="search-option-label">意向城市</label>
        <div class="search-option-col">
        <treeselect
          class="select-item" 
          :load-options="loadChildrenOptions"
          :multiple="true"
          :options="city_options"
          :valueConsistsOf="valueConsistsOf"
          placeholder="请选择"
          v-model="listQuery.preferred_city_group"
          style="width:160px"
          />
        </div>
      </div>
      <div class="search-option-row" v-show="isExpandSelect">
        <label class="search-option-label">学历</label>
        <div class="search-option-col">
        <treeselect
          class="select-item" 
          :load-options="loadChildrenOptions"
          :multiple="true"
          :valueConsistsOf="valueConsistsOf"
          :options="education_backgroud_options"
          placeholder="请选择"
          v-model="listQuery.education_backgroud"
          style="width:160px"
          />
        </div>
        <label class="search-option-label">语言</label>
        <div class="search-option-col">
        <treeselect
          class="select-item" 
          :multiple="true"
          :valueConsistsOf="valueConsistsOf"
          :options="language_level_options"
          :load-options="loadChildrenOptions"
          placeholder="请选择"
          v-model="listQuery.language_level_group"
          style="width:160px"
        />
        </div>
        <label class="search-option-label">年薪</label>
         <div class="search-option-col">
        <el-input v-model="listQuery.min_annual_salary"  class="select-item" placeholder="" style="width:60px" > </el-input>至
        <el-input v-model="listQuery.max_annual_salary"  class="select-item"  placeholder="" style="width:65px"></el-input>万
        </div>
        <label class="search-option-label">年限</label>
         <div class="search-option-col">
        <el-input v-model="listQuery.min_work_age"  class="select-item" placeholder="" style="width:60px" > </el-input>至
        <el-input v-model="listQuery.max_work_age"  class="select-item" placeholder="" style="width:65px"></el-input>年
        </div>
      </div> 
      <div class="search-option-row" v-show="isExpandSelect">
        <label class="search-option-label">姓名</label>
        <div class="search-option-col">
          <el-input v-model="listQuery.candidate_name"  class="select-item"  placeholder="" style="width:150px"></el-input>
        </div>
        <label class="search-option-label">手机</label>
        <div class="search-option-col">
        <el-input v-model="listQuery.mobile_phone"  class="select-item"  placeholder="" style="width:150px"></el-input>
        </div>
        <label class="search-option-label">年龄</label>
        <div class="search-option-col">
          <el-input v-model="listQuery.min_age"  class="select-item" placeholder="" style="width:60px" ></el-input>至
          <el-input v-model="listQuery.max_age"  class="select-item" placeholder="" style="width:65px"></el-input>岁
        </div>
        <label class="search-option-label">性别</label>
        <div class="search-option-col">
          <el-select class="filter-item" v-model="temp.gender" placeholder="请选择" style="width:120px">
          <el-option v-for="item in userGenderOptions" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-button-row">
        <label class="search-button-label"></label>
        <div class="search-button-col">
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter" round>搜索</el-button>
        <el-button size="mini" type="primary" icon="el-icon-refresh" @click="clearOptions" round>清空</el-button>
        </div>
      </div>  
    </div>
    <div class="table-header-row">
      <div class="table-header-button">
        <span style="margin: 4px 5px 0px 20px;">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" ></el-checkbox>
        </span>
        <span style="margin: 2px 5px 2px 5px;">
          <el-button plain size="mini" @click="handleCreate" >新增人才</el-button>
        </span>
        <span style="margin: 2px 5px 2px 5px;">
          <el-button plain size="mini" :disabled="batchAddProjectDisable"  @click="batchAddProject">加入项目</el-button>
        </span>
        <!-- <span>
          <el-button plain size="mini" @click="toggleSelection()">取消选择</el-button>
        </span>   -->
      </div>
    </div>

    <div class="table-container">
      <!-- <el-table v-loading="listLoading" border ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="55">
        </el-table-column>
        <el-table-column fixed label="姓名" width="80">
          <template slot-scope="scope">
            <span class="link-type" @click="handleView(scope.row)">
              {{ scope.row.candidate_name }}<svg-icon icon-class="share-square" />
            </span>
            </template>
        </el-table-column>
        <el-table-column fixed label="公司" min-width="200">
          <template slot-scope="scope">
            <span class="link-type" @click="handleViewCompanyDesc(scope.row)">
            {{ scope.row.company_name }}<svg-icon icon-class="share-square" />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="职位" width="100">
          <template slot-scope="scope">{{ scope.row.position }}</template>
        </el-table-column>
        <el-table-column  label="城市" width="60">
          <template slot-scope="scope">{{ scope.row.city  | mncCityValFilter }}</template>
        </el-table-column>
        <el-table-column  label="我的推荐" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.my_cv_count"  class="link-type"  @click="handleViewCv(scope.row)">
              {{scope.row.my_cv_count}}<svg-icon icon-class="share-square" />
            </span>
            <span v-else class="link-type" @click="handleViewCv(scope.row)">0<svg-icon icon-class="share-square" /></span>
          </template>
        </el-table-column>
        <el-table-column  label="手机" width="120">
          <template slot-scope="scope">{{ scope.row.mobile_phone }}</template>
        </el-table-column>
        <el-table-column label="备注" min-width="200">
          <template slot-scope="scope"> 
          <span v-if="scope.row.comments && scope.row.comments.length >0" >{{ scope.row.comments[0].comment || ''}}</span>
          <span v-else></span>
          <span v-if="scope.row.comments && scope.row.comments.length >1" class="link-type" @click='handleShowMoreComments(scope.row)'>更多</span>
          <span v-else></span>
          <el-button icon="el-icon-tickets" @click='handleAddComment(scope.row)' size="mini" >新增</el-button>
          </template>
        </el-table-column>
        <el-table-column  label="最近联系" width="120">
          <template slot-scope="scope">{{ scope.row.newest_contact_time | timeFromNowFilter}}</template>
        </el-table-column>
        <el-table-column  label="操作"  width="50"> 
          <template slot-scope="scope">
            <el-dropdown @command="handleCommand"  trigger="click">
              <span class="el-dropdown-link">
                <svg-icon icon-class="code" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command='{type:"edit", data: scope.row}' >编辑人才</el-dropdown-item>
                <el-dropdown-item :command='{type:"project", data: scope.row}'>加入项目</el-dropdown-item>
                
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table> -->
      <div v-loading="listLoading" >
        <div v-for="( item ) in tableData" :key="item.id" :value="item">
          <el-card class="">
            <div class="row-candidate-name">
              <span>
                <el-checkbox v-model="item.selected" @change="handleCheckedChange"> </el-checkbox>
                <span class="link-type" @click="handleView(item)">
                  <span style="font-weight: 600;color: #409EFF;">
                    {{ item.candidate_name }}<svg-icon icon-class="share-square" />
                  </span>
                </span>
                <span v-if="item.city"> ({{item.city}}) </span>
                <!-- <svg-icon icon-class="attach" /><span>3</span> -->
              </span>
              <span>
                <span>
                  <span class='label'>电话:</span> 
                  <span style="color: #409EFF;">{{item.mobile_phone ? item.mobile_phone : "暂无"}}</span>
                </span>
                <span>
                  <span class='label'>拥有者:</span>
                  <span style="color:#409EFF;">{{getName(item.consultant)}}</span>
                  <span style="color:#939393;">{{item.newest_contact_time | timeFromNowFilter}}</span>
                </span>
                <!-- <span>
                  <span class='label'>创建时间:</span>
                  <span style="color: #409EFF;">{{ item.consultant_record_date | timeFilter('{y}-{m}-{d}') }} </span>
                </span> -->
                <!-- <span>
                  <span class='label'>最近联系:</span>
                  <span style="color: #409EFF;">{{item.newest_contact_time | timeFromNowFilter}}</span>
                </span> -->
              </span>
            </div>
            <div class="row-candidate-desc" >
              <span>
                <span v-if="item.email">
                  <span class='label'>邮箱:</span>
                  <span> {{item.email}}</span> 
                </span>
              </span>
            </div>
            <div class="row-candidate-company">
              <span>
                <span class='label'>最近公司</span>
                <span>{{item.company_name ? item.company_name : "暂无"}} | {{item.position ? item.position : "暂无"}}</span>
              </span>
            </div> 
            <div class="row-candidate-end">
              <span class="row-candidate-action">
                <span class="link-type"  style="margin-right:20px;"  @click='handleAddComment(item)'>
                  <span v-if="item.comments" > <svg-icon icon-class="remark" />&nbsp;{{ item.comments.length}}</span>
                  <span v-else><svg-icon icon-class="remark" />&nbsp;0</span>
                  <span>沟通记录</span>
                </span>
                <span class="link-type" style="margin-right:20px;" @click="handleSendCV(item)">
                  <span><svg-icon icon-class="cv" /> {{item.my_cv_to_client_count}} 推荐</span>
                </span> 
                <span class="link-type" style="margin-right:20px;" @click="handleProject(item)">
                  <span><svg-icon icon-class="add_project_s" />  {{item.my_cv_count}}  加入项目</span>
                </span>
                <span class="link-type" style="margin-right:20px;" @click="handleUpdate(item)">
                  <span><svg-icon icon-class="edit" /> 编辑人才</span>
                </span>
                <span v-if="hasRoles(['CANDIDATE_INFO_DEL', 'SUPER_ADMIN'])" class="link-type" @click="handleDelete(item)">
                  <span><svg-icon icon-class="del" /> 删除人才</span>
                </span>
             
              </span>
              <span>
              </span>
              <!-- <el-button icon="el-icon-tickets" @click='handleAddComment(scope.row)' size="mini" >新增</el-button> -->
            </div>
            <div class="row-candidate-contact-record">
                <span v-if="item.comments && item.comments.length >0" >
                  <span class='label'>最新沟通({{getName(item.comments[0].user_id)}} {{item.comments[0].comment_date | timeFromNowFilter}}):</span>
                  <!-- <span style="color:#409EFF;">{{getName(item.comments[0].user_id)}}</span>
                  <span style="color:#939393;">{{item.comments[0].comment_date | timeFromNowFilter}}</span> -->
                  <span>{{ item.comments[0].comment || ''}}</span>
                  <span v-if="item.comments && item.comments.length >1" class="link-type" @click='handleShowMoreComments(item)'>更多</span>
                </span>
            </div>
              
          </el-card>
        </div>
      </div>
 
      <div class="pagination-container">
      <el-pagination background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="current_page" :page-sizes="[10,20,30, 50]" 
        :page-size="listQuery.limit" layout="total, sizes, prev, pager, next" 
        :total="total"
      >
      </el-pagination>
      </div>
    </div>
    <el-dialog title="沟通记录" :visible.sync="dialogHistoryCommentsVisible" append-to-body>
      <el-table :data="this.history_comments" border fit highlight-current-row style="width: 100%" >
        <el-table-column  label="备注" width="500px"> 
          <template slot-scope="comment_scope">
            {{comment_scope.row.comment}}
          </template>
        </el-table-column>
        <el-table-column label="时间" width="100px"> 
          <template slot-scope="comment_scope">
            {{comment_scope.row.comment_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
      <el-pagination background 
        @size-change="handleHistoryCommentsSizeChange" 
        @current-change="handleHistoryCommentsCurrentChange" 
        :current-page="history_comments_current_page" :page-sizes="[10,20,30, 50]" 
        :page-size="historyCommentsListQuery.limit" layout="total, sizes, prev, pager, next" 
        :total="historyCommentstotal"
        >
      </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="新增沟通记录" :visible.sync="commentDialogVisible" append-to-body>
      <el-form  :rules="comment_rules" ref="commentForm" :model="comment_temp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="记录" prop="comment">
          <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="comment_temp.comment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="commentDialogVisible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="addComment">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
    <CandidateDialog :id="candiate_dialog.id" :visible="candiate_dialog.visible" :status="candiate_dialog.status" @closeDialog="handleCloseDialog">
    </CandidateDialog>
    <CandidateProject :data="project_dialog.data" :visible="project_dialog.visible" :report="project_dialog.report" @closeDialog="handleCloseProjectDialog">
    </CandidateProject>
    <CandidateReport :id="report_dialog.id" :visible="report_dialog.visible" @closeDialog="handleCloseReport">
    </CandidateReport>
    <el-tooltip placement="top" content="顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'
import BackToTop from '@/components/BackToTop'
import CandidateDialog from '@/views/candidate/components/candidateDialog'
import CandidateReport from '@/views/candidate/components/candidateReport'
import CandidateProject from '@/views/candidate/components/candidateProject'
import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
const simulateAsyncOperation = fn => {
  setTimeout(fn, 200)
}

const cityCascaderOptions = Static_Data.city.map((item) => {
  const item_children = []
  if (item.children && item.children.length > 0) {
    item.children.map(function(subitem) {
      item_children.push({ value: subitem.id, label: subitem.label })
    })
  }
  return { value: item.id, label: item.label, children: item_children }
})
export default {
  name: 'candidate',
  components: { Treeselect, BackToTop, CandidateDialog, CandidateReport, CandidateProject },
  data() {
    return {
      showContent: '1242',
      userOptions: this.$store.getters.usersList,
      valueConsistsOf: 'ALL',
      current_user_id: this.$store.getters.userId,
      current_user_roles: this.$store.getters.roles,
      batchAddProjectDisable: true,
      commentDialogVisible: false,
      dialogHistoryCommentsVisible: false,
      comment_rules: {
        comment: [
          { required: true, message: '必须填写', trigger: 'change' }
        ]
      },
      comment_temp: { comment: '' },
      history_comments: [],
      history_comments_current_page: 1,
      historyCommentstotal: 0,
      historyCommentsListQuery: {
        page: 1,
        offset: 0,
        limit: 10,
        candidate_id: ''
      },
      project_dialog: {
        visible: false,
        data: [],
        report: false
      },
      report_dialog: {
        id: '',
        visible: false
      },
      candiate_dialog: {
        id: '',
        visible: false,
        status: ''
      },
      listQuery: {
        page: 1,
        offset: 0,
        limit: 20,
        sort: '-CAST(newest_contact_time AS SIGNED)',
        keyword_group: '',
        position_group: '',
        company_name: '',
        candidate_name: '',
        experience_type: '1',
        industry: [],
        job: [],
        city: [],
        mobile_phone: '',
        max_age: '',
        min_age: '',
        max_work_age: '',
        min_work_age: '',
        min_annual_salary: '',
        max_annual_salary: '',
        preferred_city_group: [],
        education_backgroud: [],
        language_level_group: [],
        gender: '0'
      },
      isExpandSelect: false,
      isAllKeyword: false,
      myBackToTopStyle: {
        right: '50px',
        bottom: '25px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },
      total: 0,
      current_page: 1,
      education_backgroud_options: Static_Data.education_backgroud,
      language_level_options: Static_Data.language_level,
      city_options: Static_Data.mnc_city,
      city_cascader_options: cityCascaderOptions,
      industry_options: Static_Data.industry,
      job_options: Static_Data.job,
      company_category_options: Static_Data.company_type,
      userGenderOptions: Static_Data.gender,
      listLoading: true,
      tableData: [],
      multipleSelection: [],
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑人才',
        create: '新增人才'
      },
      checkAll: false,
      checkedCandidates: [],
      candidates_group: [],
      isIndeterminate: false
    }
  },
  created() {
    this.getList()
  },
  filters: {
  },
  methods: {
    getName: function(id) {
      let username = ''
      this.userOptions.map(item => {
        if (item.id === id) {
          username = item.username
          return username
        }
      })
      return username
    },
    handleCheckAllChange(val) {
      for (let index = 0; index < this.tableData.length; index++) {
        this.$set(this.tableData[index],'selected', val)
      }
      this.isIndeterminate = false
      this.batchAddProjectDisable = (!val)
    },
    handleCheckedChange() {
      const count = this.tableData.length
      let checkedCount = 0
      for (let index = 0; index < count; index++) {
        const element = this.tableData[index]
        if (element.selected) {
          checkedCount++
        }
      }
      this.checkAll = (count === checkedCount) && (checkedCount > 0)
      this.isIndeterminate = checkedCount > 0 && checkedCount < count
      this.batchAddProjectDisable = (checkedCount ===0)
    },
    hasRoles(roles) {
      return this.current_user_roles.some(item => roles.indexOf(item) >= 0)
    },
    batchAddProject() {
      const candidate_group = this.tableData.map(item => ({ id: item.id, name: item.candidate_name }))
      if (candidate_group && candidate_group.length > 0) {
        this.project_dialog = {
          data: candidate_group,
          visible: true,
          report: false
        }
      }
    },
    handleAddComment(data) {
      this.comment_temp = { candidate_id: data.id, comment: '' }
      this.commentDialogVisible = true
      this.$nextTick(() => {
        this.$refs['commentForm'].clearValidate()
      })
    },
    addComment() {
      this.$refs['commentForm'].validate((valid) => {
        if (valid) {
          API.candidate.add_comment(this.comment_temp).then((response) => {
            for (const v of this.tableData) {
              if (v.id === this.comment_temp.candidate_id) {
                const index = this.tableData.indexOf(v)
                this.tableData.splice(index, 1, response.data)
                break
              }
            }
            this.commentDialogVisible = false
            this.comment_temp = { comment: '' }
          })
        }
      })
    },
    handleDelete(data) {
      this.$confirm('此操作将删除该人才' + data.candidate_name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        API.candidate.delete(data.id).then(response => {
          for (const v of this.tableData) {
            if (v.id === data.id) {
              const index = this.tableData.indexOf(v)
              this.tableData.splice(index, 1)
              break
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCommand(val) {
      if (val.type && val.data && val.type === 'view') {
        this.handleView(val.data)
      }
      if (val.type && val.data && val.type === 'edit') {
        this.handleUpdate(val.data)
      }
      if (val.type && val.data && val.type === 'report') {
        this.handleReport(val.data)
      }
      if (val.type && val.data && val.type === 'project') {
        this.handleProject(val.data)
      }
      if (val.type && val.data && val.type === 'delete') {
        this.handleDelete(val.data)
      }
    },
    handleShowMoreComments(data) {
      this.historyCommentsListQuery.candidate_id = data.id
      this.getHistoryCommentsList(this.historyCommentsListQuery)
      this.dialogHistoryCommentsVisible = true
    },
    getHistoryCommentsList(query) {
      if (query && query.candidate_id) {
        API.candidate.comments(query).then(response => {
          this.history_comments = response.data
          if (response.headers && response.headers['x-total-count']) {
            this.historyCommentstotal = Number(response.headers['x-total-count'])
          }
        })
      } else {
        this.$message({
          showClose: true,
          message: '请先选择人才',
          type: 'warning'
        })
      }
    },
    handleHistoryCommentsSizeChange(val) {
      this.historyCommentsListQuery.limit = val
      this.getHistoryCommentsList(this.historyCommentsListQuery)
    },
    handleHistoryCommentsCurrentChange(val) {
      if (val >= 1) {
        this.history_comments_current_page = val
        this.historyCommentsListQuery.offset = (val - 1) * this.historyCommentsListQuery.limit
        this.getHistoryCommentsList(this.historyCommentsListQuery)
      }
    },
    handleViewCompanyDesc(row) {
      /* 验证是否存在查看权限 */
      if (row && row.company_name && row.company_name !== '') {
        API.company.index({ company_name: row.company_name }).then(response => {
          if (response.data) {
            this.$router.push({
              name: 'companyDetail',
              params: {
                id: response.data.id,
                name: response.data.company_name,
                tab: 'base'
              }
            })
          } else {
            this.$message(row.company_name + '系统中不存在详细信息')
          }
        })
      }
    },
    closeCompanyDescDialog() {
      this.company_desc = {
        id: '',
        visible: false,
        header_name: '',
        active_tab: 'base'
      }
    },
    expandSelect(isExpand) {
      if (isExpand) {
        this.isExpandSelect = true
      } else {
        this.isExpandSelect = false
      }
    },
    handleFilter() {
      this.getList()
    },
    clearOptions() {
      this.listQuery = {
        page: 1,
        offset: 0,
        limit: 20,
        sort: '',
        keyword_group: '',
        position_group: '',
        company_name: '',
        candidate_name: '',
        experience_type: '1',
        industry: [],
        job: [],
        city: [],
        mobile_phone: '',
        max_age: '',
        min_age: '',
        max_work_age: '',
        min_work_age: '',
        min_annual_salary: '',
        max_annual_salary: '',
        preferred_city_group: [],
        education_backgroud: [],
        language_level_group: [],
        gender: '0'
      }
    },
    getList() {
      this.listLoading = true
      API.candidate.all(this.listQuery).then(response => {
        this.tableData = response.data
        if (response.headers && response.headers['x-total-count']) {
          this.total = Number(response.headers['x-total-count'])
        }
        this.listLoading = false
      })
    },
    handleView(row) {
      if (row.id && row.id !== '') {
        this.$router.push({
          name: 'candidateDetail',
          params: {
            id: row.id,
            name: row.candidate_name,
            tab: 'candidate'
          }
        })
      }
    },
    handleViewCv(row) {
      if (row.id && row.id !== '') {
        this.$router.push({
          name: 'candidateDetail',
          params: {
            id: row.id,
            name: row.candidate_name,
            tab: 'cv'
          }
        })
      }
    },
    handleCloseDescDialog(val) {
      this.candidate_desc = {
        id: '',
        visible: false,
        header_name: '',
        active_tab: 'origin'
      }
    },
    handleCreate() {
      this.candiate_dialog = {
        id: '',
        visible: true,
        status: 'create'
      }
    },
    handleUpdate(row) {
      if (row && row.id) {
        this.candiate_dialog = {
          id: row.id,
          visible: true,
          status: 'update'
        }
      }
    },
    handleCloseDialog(val) {
      this.candiate_dialog = {
        id: '',
        visible: false,
        status: ''
      }
      if (val && val.type === 'create_success' && val.data) {
        this.tableData.unshift(val.data)
        // // 打开加入项目界面
        // this.project_dialog = {
        //   data: [{ id: val.data.id, name: val.data.candidate_name }],
        //   visible: true
        // }
      }
      if (val && val.type === 'update_success' && val.data) {
        for (const v of this.tableData) {
          if (v.id === val.data.id) {
            const index = this.tableData.indexOf(v)
            this.tableData.splice(index, 1, val.data)
            break
          }
        }
      }
    },
    handleReport(row) {
      this.report_dialog = {
        id: row.id,
        visible: true
      }
    },
    handleProject(row) {
      this.project_dialog = {
        data: [{ id: row.id, name: row.candidate_name }],
        visible: true,
        report: false
      }
    },
    handleSendCV(row) {
      this.project_dialog = {
        data: [{ id: row.id, name: row.candidate_name }],
        visible: true,
        report: true
      }
    },
    handleCloseProjectDialog(val) {
      setTimeout(() => {
        this.project_dialog = {
          data: [],
          visible: false
        }
        if (val && val.type === 'batch_project_success' && val.data) {
          // 批量加入项目
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
        }
        if (val && val.type === 'project_success' && val.data) {
          // 打开推荐界面
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
        }
        if (val && val.type === 'report_success' && val.data) {
          // 打开推荐界面
          this.$notify({
            title: '成功',
            message: '加入项目成功',
            type: 'success',
            duration: 1000
          })
          setTimeout(() => {
            this.report_dialog = {
              id: val.data.id,
              visible: true
            }
          }, 1000)
        }
      }, 200)
    },
    handleCloseReport(val) {
      this.report_dialog = {
        id: '',
        visible: false
      }
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      if (val >= 1) {
        this.current_page = val
        this.listQuery.offset = (val - 1) * this.listQuery.limit
        this.getList()
      }
    },
    loadChildrenOptions({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        switch (parentNode.id) {
          default: /* empty */
            simulateAsyncOperation(() => {
              callback()
            })
        }
      }
    }
  }
}
</script>

<style scoped>
  .label {
    text-align:right;
    color:#939393;
    font-weight:normal;
  }
  .row-candidate-name{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: stretch; 
    align-content: stretch;
    margin-bottom: 10px;
  }
  .row-candidate-company{
    margin-bottom: 10px;
  }
  .row-candidate-desc{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: stretch; 
    align-content: stretch;
  }
  .row-candidate-end{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: space-between;
    align-items: stretch; 
    align-content: stretch;  
  }
  
  .row-candidate-contact-record{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start;
    align-items: stretch; 
    align-content: stretch;
    margin-top: 8px;
    font-size: 5px;
  }
  .row-candidate-action{
    display:flex;
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start;
    align-items: stretch; 
    align-content: stretch;
  }
  .search-container{
    display: block;
    border: 1px solid #ebebeb;
    margin: 2px 2px 2px 2px;
  }
  .search-option-row{
    display: block;
    margin: 6px 0px 6px 6px;
  } 
  .search-option-label{
    display: inline-block;
    width: 9%;
    text-align: right;
  }
  .search-option-col1-for-row{
    display: inline-block;
    width:  90%;
  }
  .search-option-col{
    display: inline-block;
    width:  15%;
  }
  .search-button-row{
    display: block;
    margin: 2px 0px 2px 2px;
  }
  .search-button-label{
    display: inline-block;
    width: 8%;
    text-align: right;
  }
  .search-button-col{
    display: inline-block;
    width: 25%;
  }

  .table-header-row {
    display: block;
    border: 1px solid #ebebeb;
    margin: 2px 0px 2px 2px;
  }

  .table-header-button {
    display: flex;
    
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start;
    align-items: stretch; 
    align-content: stretch;
  }

  .table-container{
    border: 1px solid #ebebeb;
    margin: 2px 2px 2px 2px;   
  }

  .select-item {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
  }

  .form-row {
    display: block;
  }

  .form-item {
    width: 48%
  }

  .form-item-full {
    width: 100%
  }
  .el-checkbox__label{
    color: #409EFF; 
  }
  .el-card__body {
      padding: 20px 20px 10px 20px;
  }
</style>